<template>
  <view class="chat-container">
    <!-- 聊天记录区域 -->
    <view class="chat-messages" id="chatScrollView">
      <!-- 历史消息列表 -->
      <view
        v-for="(msg, index) in messageList"
        :key="index"
        :class="['message-item', msg.who === 0 ? 'user-message' : 'ai-message']"
      >
        <!-- 头像 -->
        <view class="avatar">
          <text>{{ msg.who === 0 ? 'ME' : 'AI' }}</text>
        </view>

        <!-- 消息内容 -->
        <view class="message-bubble">
          <text>{{ msg.content }}</text>
        </view>
      </view>
    </view>

    <!-- 输入区域 -->
    <view class="input-area">
      <input
        type="text"
        v-model="inputContent"
        placeholder="请输入您的问题..."
        class="message-input"
        @keyup.enter="sendMessage"
      />
      <button class="send-btn" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: uni.getStorageSync('xm-user') || {},
      messageList: [],
      inputContent: '',
      // AI初始欢迎消息（固定内容，介绍功能）
      aiWelcomeMsg: {
        userId: '', // 后续赋值当前用户ID
        content: '哈喽～我是自习室的智能客服！我可以为你推荐各类会员卡（不同类型、价格和销量都有哦），也能介绍自习室的书籍资料或视频资料，有相关需求随时跟我说～',
        who: 1, // 1表示AI发送
        createTime: new Date().toLocaleString()
      }
    };
  },
  onShow() {
    // 页面显示时加载历史消息 + 处理初始欢迎消息
    this.loadHistoryMessages();
  },
  methods: {
    // 加载历史聊天记录 + 处理初始欢迎消息
    loadHistoryMessages() {
      if (!this.user.id) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }

      // 给AI初始消息赋值当前用户ID
      this.aiWelcomeMsg.userId = this.user.id;

      this.$request.get('/ai/selectAll', {
        userId: this.user.id
      }).then(res => {
        // 修正：'200' 后面补全单引号，字符串闭合
        if (res.code === '200' && Array.isArray(res.data)) {
          this.messageList = res.data;
          // 判断历史消息是否为空：空则添加AI初始欢迎消息
          if (this.messageList.length === 0) {
            this.messageList.push(this.aiWelcomeMsg);
          }
        } else {
          // 接口获取失败时，也显示AI初始欢迎消息（保证用户有交互起点）
          this.messageList = [this.aiWelcomeMsg];
          uni.showToast({ title: '加载历史消息失败，显示初始服务提示', icon: 'none' });
        }
        // 无论是否加载成功，都滚动到最底部
        this.scrollToBottom();
      }).catch(err => {
        console.error('加载历史消息错误:', err);
        // 网络错误时，显示AI初始欢迎消息
        this.messageList = [this.aiWelcomeMsg];
        uni.showToast({ title: '网络错误，显示初始服务提示', icon: 'none' });
        this.scrollToBottom();
      });
    },

    // 发送消息
    sendMessage() {
      const content = this.inputContent.trim();
      if (!content) {
        uni.showToast({ title: '请输入内容', icon: 'none' });
        return;
      }

      if (!this.user.id) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }

      // 1. 添加用户消息到界面
      const userMsg = {
        userId: this.user.id,
        content: content,
        who: 0, // 0表示用户
        createTime: new Date().toLocaleString()
      };
      this.messageList.push(userMsg);
      // 立即滚动到最底部（用户消息先显示）
      this.scrollToBottom();

      // 2. 清空输入框
      this.inputContent = '';

      // 3. 调用后端接口获取AI回复
      this.$request.post('/ai/add', {
        content: content,
        userId: this.user.id
      }).then(res => {
        if (res.code === '200' && res.data) {
          // 添加AI回复到界面
          const aiMsg = {
            userId: this.user.id,
            content: res.data,
            who: 1, // 1表示AI
            createTime: new Date().toLocaleString()
          };
          this.messageList.push(aiMsg);
        } else {
          // AI回复失败时，显示提示消息
          const errorMsg = {
            userId: this.user.id,
            content: '抱歉～暂时没获取到回复，请稍后再试～',
            who: 1,
            createTime: new Date().toLocaleString()
          };
          this.messageList.push(errorMsg);
          uni.showToast({ title: '获取回复失败', icon: 'none' });
        }
        // AI消息显示后，再次滚动到最底部
        this.scrollToBottom();
      }).catch(err => {
        console.error('发送消息错误:', err);
        // 网络错误时，显示提示消息
        const errorMsg = {
          userId: this.user.id,
          content: '网络有点不稳定～请检查网络后再试～',
          who: 1,
          createTime: new Date().toLocaleString()
        };
        this.messageList.push(errorMsg);
        uni.showToast({ title: '发送失败', icon: 'none' });
        // 错误消息显示后，滚动到最底部
        this.scrollToBottom();
      });
    },

    // 滚动到聊天区域最底部（精准定位）
    scrollToBottom() {
      // 延迟执行：确保DOM已更新（消息渲染完成后再滚动）
      setTimeout(() => {
        uni.createSelectorQuery().in(this)
          .select('#chatScrollView') // 定位聊天滚动容器
          .boundingClientRect(rect => {
            if (rect) { // 避免rect为null的异常
              uni.createSelectorQuery().in(this)
                .select('#chatScrollView')
                .scrollTo({
                  scrollTop: rect.height, // 容器内容高度 = 最底部位置
                  duration: 0 // 无动画，瞬间滚动
                });
            }
          }).exec();
      }, 50); // 缩短延迟，滚动更及时
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f9f9f9;
  padding: 16rpx;
  box-sizing: border-box;
}

/* 聊天消息区域：添加固定ID，用于精准滚动定位 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16rpx;
  padding-right: 20rpx; /* 解决滚动条遮挡问题 */
}

/* 消息项通用样式 */
.message-item {
  display: flex;
  margin-bottom: 24rpx;
  max-width: 100%;
}

/* 用户消息（右侧） */
.user-message {
  flex-direction: row-reverse;
}

/* AI消息（左侧） */
.ai-message {
  flex-direction: row;
}

/* 头像样式 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  font-weight: bold;
  margin: 0 16rpx;
  flex-shrink: 0;
}

.user-message .avatar {
  background-color: #9c27b0; /* 紫色 - 用户头像 */
  color: white;
}

.ai-message .avatar {
  background-color: #ba68c8; /* 淡紫色 - AI头像 */
  color: white;
}

/* 消息气泡 */
.message-bubble {
  max-width: 70%;
  padding: 24rpx;
  border-radius: 24rpx;
  font-size: 28rpx;
  line-height: 1.5;
  word-wrap: break-word; /* 优化文字换行 */
  word-break: break-all;
}

.user-message .message-bubble {
  background-color: #9c27b0; /* 紫色 - 用户消息 */
  color: white;
  border-bottom-right-radius: 8rpx;
}

.ai-message .message-bubble {
  background-color: white; /* 白色 - AI消息 */
  color: #333;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 8rpx;
}

/* 输入区域 */
.input-area {
  display: flex;
  padding: 16rpx;
  background-color: white;
  border-radius: 16rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-top: 10rpx;
}

.message-input {
  flex: 1;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1px solid #e0e0e0;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-right: 16rpx;
  line-height: 80rpx; /* 优化输入框文字垂直居中 */
}

.send-btn {
  width: 140rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #9c27b0; /* 紫色 - 发送按钮 */
  color: white;
  border-radius: 40rpx;
  font-size: 28rpx;
  text-align: center;
  border: none;
}

.send-btn:active {
  background-color: #7b1fa2; /* 深紫色 - 按钮点击状态 */
}
</style>